<template>
    <div>
        <van-nav-bar
      title="客户列表信息"
      left-arrow
      right-text="新增"
      @click-left="$router.push('/home')"
      @click-right="addClick"
    />

       <!-- 搜索 -->
    <van-search
      v-model="value"
      placeholder="客户名称/联系方式"
       shape="round"
      show-action
    >
      <template #action>
        <div style="color: #003399" >搜索</div>
      </template>
    </van-search>

     <div class="describe">
      <div v-for="item in showList" :key="item.id"  class="order-content" >
        <div class="content"  @click="goclientsDetail(item)">
            <div class="cont-center">
              <span class="span1">客户名称</span>
              <span>{{item.custName}}</span>
            </div>
            <div class="cont-center">
              <span class="span1">联系方式</span>
              <span>{{item.telephone}}</span>
            </div>
            <div class="cont-center">
              <span class="span1">公司名称</span>
              <span>{{item.company}}</span>
            </div>
            <div class="cont-center">
              <span class="span1">职务</span>
              <span>{{item.position}}</span>
            </div>
          </div>
        <div class="btn">
          <button  class="pjbtn"  @click="bai(item.id)">
              拜访记录
           
          </button>
          <button
            class="ckpj"
            @click="newASdd(item.id,item.custName)"
            
          >
            新增拜访
          </button>
        </div>

        
      </div>
    </div>

    <div @click="showAll = !showAll" class="show-more">{{word}}⏷</div>
    </div>
</template>

<script>
import {Cust} from '../request/api'
export default {
    data () {
        return {
        value:"",
        custArr:[],
        showAll:false, 
        }
    },
    created(){
        Cust({
            current:1,
            size:10
        }).then(res=>{
            this.custArr=res.data.records
            // console.log(this.custArr);
        })
    },
    methods:{
      
    newASdd(id,name){
      this.$router.push({name:'NewAdd',params:{id,name}})
    },
    bai(id){
      this.$router.push({name:'Baifang',params:{id}})
    },
        // 新增
        addClick(){
            this.$router.push('/addcust')
        },
        // 客户详情页
      goclientsDetail(item){
        //   console.log(item.id);
          this.$router.push({
              path:'/custImformation',
              query:{
                  id:item.id
              }
              
              }
          )
      }
    },

    computed:{
  showList(){
   if(this.showAll == false){          //当数据不需要完全显示的时候
    var showList = [];　　　　　　　　　　　　　　　 //定义一个空数组
    if(this.custArr.length > 3){　　　　　　　//这里我们先显示前三个
     for(var i=0;i<3;i++){
      showList.push(this.custArr[i])
     }
    }else{
     showList = this.custArr
    }
    return showList;　　　　　　　　　　　　　　　　 //返回当前数组
   }else{
    return this.custArr;
   }
  },
  word(){
   if(this.showAll == false){　　　　　　　　　　　//对文字进行处理
    return '展开更多'
   }else{
    return '点击收起'
   }
  }
 }


}
</script>
 
<style lang = "less" scoped>
    /deep/.van-nav-bar {
  background-color: #003399;

  .van-nav-bar__title,
  .van-icon-arrow-left::before {
    color: #fff;
  }
  .van-nav-bar__text {
    color: #fff;
  }
}

.describe {
  margin-top: 10px;
  width: 100%;
  box-sizing: border-box;
 
.btn {
  border-top: 1px solid #e5e5e5;
  overflow: hidden;
  background-color: #fff;
  button {
    float: right;
    margin: 10px;
    border: 0;
    font-size: 14px;
    padding: 10px;
    border-radius: 20px;
  }
  .pjbtn {
    color: #fff;
    background-color: #4a68e1;
  }
  .ckpj {
    background-color: #4a68e1;
    color: #fff;
   
  }
}
.order-content {
  padding:5px 20px;
  box-sizing: border-box;
  width: 100%;
  margin-bottom: 10px;
  background-color: #fff;
}
.content {
  font-size: 14px;
 
  img {
    width: 25%;
  }

    .cont-center {
      margin: 10px 0;
    }
    .span1 {
      color: #b0b0b0;
      margin-right: 20px;
    }
    .bottom {
      margin-bottom: 10px;
    }
  } 
  }


.show-more{
    margin-top: 10px;
    width: 100%;
    color: #4a68e1;
    font-size: 12px;
    text-align: center;
    background-color: #fff;
    padding: 10px;
    box-sizing: border-box;
    font-weight: bold;
}
</style>